<template>
    <!--登录的容器-->
    <div class="login_contain">
            <!--登录的盒子-->
            <div class="login_box">
                <!--logo-->
                <div class="login_avatar">
                    <img src="../assets/logo.png">
                </div>
                <!--登录的表单
                        label-width:表示文本的宽度
                        model:表示绑定vue中的数据。
                        rules:绑定vue中定义的校验规则
                -->
                <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" class="loginForm">
                    <el-form-item  prop="username">
                        <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  prop="password">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="login_btn">
                        <el-button type="primary" @click="loginSubmit">提交</el-button>
                        <el-button @click="resetLoginForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        //这里和原来讲vue不一样了。 原来data:{}
        data(){
            return {
                loginForm:{
                    username:"",
                    password:"",
                },
                loginRules:{
                     //定义账号的规则 该名称必须与prop一致。因为规则可以定义多个。所以使用[]
                     username:[
                         //required:表示该字段是否必须输入。 message:如果没有输入的错误提示  trigger:触发机制
                         {required:true,message:"账号不能为空",trigger:"blur"},
                         {min: 5,max:12,message: "账号的长度必须为5~12",trigger: "blur"}
                     ],
                     password:[
                         {required:true,message:"密码不能为空",trigger:"blur"},
                         {min: 6,max:12,message: "密码的长度必须为6~12",trigger: "blur"}
                     ]
                }
            }
        },
        methods:{
            //重置方法
            resetLoginForm(){
                // this.loginForm={}; 只能重置表单内容，无法重新校验的消息提示。
                this.$refs.loginForm.resetFields();
            },
            //登录的方法
            loginSubmit(){
                //请求后端接口。 肯定不行 因为axios没有被引入。
                var that=this;
                this.$http.post("http://localhost:8001/login",this.loginForm).then(function(response){
                     if(response.data.code===1){
                          that.$message.success("登录成功");
                          //页面跳转
                          that.$router.push("/home");
                     }else{
                         that.$message.error("登录失败");
                         //跟新
                     }
                });
            }
        }
    }
</script>

<style scoped>
     .login_contain{
         width: 100%;
         height: 100%;
         background-color:#2B5B6B;
     }
     /*css3中属性适合手机和pc*/
    .login_box{
         width: 430px;
         height: 300px;
         background-color: #fff;
         /*绝对定位*/
         position: absolute;
         left: 50%;
         top:50%;
         /*移动-50%*/
         transform: translate(-50%,-50%) ;
         border-radius: 3px;
    }
    /*登录logo*/
    .login_avatar{
         width: 130px;
         height: 130px;
         border-radius: 50%;
         border: 3px solid #fff;
         position: absolute;
         left: 50%;
         transform: translate(-50%,-50%);
         background-color: #fff;
         padding: 5px;
    }
    .login_avatar img{
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background-color: #eee;
    }
    /*表单*/
    .loginForm{
         width: 100%;
         position: absolute;
         bottom: 0px;
         padding: 0px 20px;
         box-sizing: border-box;
    }
    /*表单按钮*/
    .login_btn{
         display: flex;
         justify-content: flex-end;
    }
</style>